<template>
	<div class="adm2">
		<div class="tabs">
			<p>商品管理</p>	
				<el-button size="mini" type="danger" @click="add()" style="float: right;">添加新的轮播图</el-button>
				<!-- 表格 -->
				<el-container>
					<el-main>
						<el-table ref='checkall' :data='list' style='width: 85%;'>
							<!-- 名称 -->
							<el-table-column prop='name' label='名称'></el-table-column>
							<el-table-column prop='sn' label='编号'></el-table-column>
							<el-table-column prop='author' label='作者'></el-table-column>
							<el-table-column prop='publisher' label='出处'></el-table-column>
							<el-table-column prop='tpublish' label='日期' :formatter="fmtDate"></el-table-column>
							<el-table-column prop='tpublish' label='图片'>
								<template v-slot="scope">
									<div style="width: 70px;height: 50px;">
										<img style="width: 100%;height: 100%;" :src="`${$Imgurl}/api/public/showImg/${scope.row.picture}`">
									</div>
								</template>
							</el-table-column>
							<el-table-column prop='but' label='操作'>
								<template v-slot="scope">
									<el-button v-on:click="update(scope.row)">修改</el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-main>
				</el-container>
				<!-- 分页 -->
				<el-pagination
				  background
				  layout="prev, pager, next"
				  :total="tatol"
				  :page-size='num'
				  @current-change='listbut'
				  >
				</el-pagination>
		</div>		
	</div>
</template>

<script>
	export default{
		name:'Adm2',
		data(){
			return{
				list:[],	//接收异地请求过来的数据
				newlist:[],	//接收分页后的数据
				checkall:[],	//整个表单的数据对象
				tatol:0,	//总页数
				num:6,		//每页数据
				page:1		//默认显示第一页
			}
		},
		methods:{
			fmtDate:function(row,column,cellValue,index){
				let d = new Date(cellValue);
				let s = d.getFullYear() + "-"
						+ d.getMonth() + "-"
						+ d.getDate();
				return s;
			},
			//点击切换到指定页数
			listbut(x){
				this.page = x
				this.axios.get('/api/adm/book/findByPage/'+x+'/6').then((res)=>{
					if(res.status === 200){
						this.list = res.data.data.books
					}
				}).catch((error)=>{
					console.log(error)
				})
			},
			//添加按钮
			add(){
				this.$router.push('/adm/bookadd')
			},
			update(idx){
				this.$store.state.hotid = idx.id
				this.$router.push({
					path:`/adm/hotupdate`,
					
				})
			},
		},
		created() {
			//异地请求第一页数据
			this.axios.get('/api/adm/book/findByPage/1/6').then((res)=>{
				if(res.status === 200){
					this.list = res.data.data.books
					//获取总条数
					this.tatol=Math.ceil(res.data.data.total/this.page)
					// 调用分页，默认显示第一个数据
					this.getPage()
				}
			}).catch((error)=>{
				// console.log(error)
			})
		}
	}
</script>

<style scoped>
.el-pagination{
	text-align: center;
}
.tabs p:first-child{
	font-size: 30px;
	color: black ;
	font-weight: bold;
	padding-bottom: 20px;
	text-indent: 1em;
	margin-bottom: -0.5rem;
}
</style>
